import {useEffect, useState} from "react";
import {MainBar, SideBar} from "@/components/bar/bar";
import Area from "@/components/area/area";
import {Switch, Route, Link as NavLink} from 'react-router-dom'
import MHome from './mhome/mhome'
import MEdit from './medit/medit'
import Manage from './manage/manage'
import config from "@/config/config";
import UserInfoStore from "@/common/store/UserInfoStore";
import './index.scss'
import {observer} from "mobx-react";

const myhome = config.main.myhome;
const wls = window.localStorage

export function MyHome() {

  const [mPageTitle, setMPageTitle] = useState(myhome.operList[0].title)

  useEffect(() => {
    UserInfoStore.queryUserInfo()
    // const loginInfo = getLoginInfo()
    // if (loginInfo == null) {
    //   props.history.replace('/home')
    //   return
    // }
    // setLoginInfo(loginInfo)
    // let avatarUrl = loginInfo.avatar ? loginInfo.avatar : 'http://xueba.it266.com:8081/default/avatar/3.jpeg'
    // setAvatar(avatarUrl)
  }, [])

  return (
    <MainBar className="myhome">

      <Area className="myhome-header">
        {/*头像*/}
        <div className="myhome-avatar">
          <div className="myhome-avatar-img" style={{backgroundImage: `url(${UserInfoStore.Avatar})`}}/>
        </div>

        <div className="myhome-user">
          <div className="myhome-user-info">
            <span className="nickname">{UserInfoStore.NickName}</span>
            <span className="level">Lv.141</span>
            <span className="id">通行证ID: {wls.XB_id}</span>
          </div>

          <div className="myhome-user-intro">
            <p className="content">这个家伙很懒，什么也没有留下...</p>
          </div>

          <div className="myhome-user-edit">
            <button onClick={() => {
              console.log(`[编辑文章] 开发中`)
            }}>编辑
            </button>
          </div>
        </div>

        <div className="myhome-data">
          <div className="unit">
            <div className="value">65</div>
            <div className="key">粉丝</div>
          </div>
          <div className="unit">
            <div className="value">211</div>
            <div className="key">关注</div>
          </div>
          <div className="unit">
            <div className="value">1340</div>
            <div className="key">获赞</div>
          </div>
        </div>
      </Area>

      <MainBar className="myhome-main">
        <SideBar className="myhome-sidebar">
          <Area
            className="myhome-side-inner"
            title="个人中心"
            titleStyle={{
              textAlign: 'left',
              fontWeight: 'normal'
            }}
          >
            <div className="oper-list">
              {myhome.operList.map((item, index) => {
                return (<Oper {...item} key={index}/>)
              })}
            </div>
          </Area>
        </SideBar>

        <MainBar className="myhome-mainbar">
          <Area
            className="myhome-main-inner"
            title={mPageTitle}
            titleStyle={{
              textAlign: 'left',
              fontWeight: 'normal'
            }}
          >
            <Switch>
              <Route exact path="/myhome" component={MHome}/>
              <Route path="/myhome/edit" component={MEdit}/>
              <Route path="/myhome/manage"><Manage type='myself'/></Route>
              <Route path="/myhome/favorite"><Manage type='favorite'/></Route>
              <Route path="/myhome/message" component={MHome}/>
              <Route path="/myhome/setting" component={MHome}/>
            </Switch>
          </Area>
        </MainBar>
      </MainBar>
    </MainBar>
  )
}

export default observer(MyHome)

function Oper(props: any) {

  const [now, setNow] = useState(wls.XB_myhome_now)
  const [nowRoute, setNowRoute] = useState(wls.XB_myhome_now_route)

  const [hover, setHover] = useState('')

  function handleHover() {
    if (now !== props.title) {
      setHover('hover')
    }
  }

  function handleUnHover() {
    if (now !== props.title) {
      setHover('')
    }
  }

  function switchThis() {
    wls.setItem(`XB_myhome_now`, props.title)
    wls.setItem(`XB_myhome_now_route`, props.route)
  }

  useEffect(() => {
    handleUnHover()
    setNow(wls.XB_myhome_now)
    setNowRoute(wls.XB_myhome_now_route)
  }, [wls.XB_myhome_now])

  return (
    <NavLink
      to={props.route}
      className="oper-unit"
      onMouseEnter={handleHover}
      onMouseLeave={handleUnHover}
      onClick={switchThis}
    >
      <i className={
        (now === props.title) ?
          ['oper-icon', 'hover', props.iconClass].join(' ') :
          ['oper-icon', hover, props.iconClass].join(' ')
      }/>
      <div className={
        (now === props.title) ?
          ['oper-type', 'hover'].join(' ') :
          ['oper-type', hover].join('')
      }>{props.title}</div>
    </NavLink>
  )
}
